<!-- 筛选区 -->
<script setup>
import { reactive } from 'vue'
import { NSkeleton } from 'naive-ui'

const emit = defineEmits(['change-filter'])

const props = defineProps({
  filter: {
    type: Object,
    default: {}
  }
})

const filterData = reactive({})

// 获取筛选数据的函数
const getFilterParams = () => {

}
const data = {
  brandId: null,
  attrs: null
}



/**
 * 
 * @param {*} id 当前选择项id
 */
const changeBrand = (id) => {
  if (props.filter.brands.selected === id) return
  data.brandId = id
  props.filter.brands.selected = id
  emit('change-filter', data)

}

/**
 * 
 * @param {*} item 当前选择项
 * @param {*} id 当前选择项id
 * @param {*} names 当前选择项name
 */
const changeProps = (item, id, names) => {
  // 当选择同一个id时直接返回
  if (item.properties.selected === id) return
  // 将之间存入的数据清空
  data.attrs = []
  // 另存当前选择条件的 id 与 name
  item.properties.selected = id
  item.properties.selectedName = names
  // 循环filter数据
  props.filter.saleProperties.forEach(element => {
    // 获取saleProperties属性下的 name 的值
    const { name } = element
    // 获取我们另存的id 与 name 属性
    const { selected } = element.properties
    const { selectedName } = element.properties
    // 赋值给data中的attrs属性
    if (selectedName !== undefined && selectedName !== '全部') {
      data.attrs.push({
        groupName: name,
        propertyName: selectedName || null
      })
    }
  });
  if (data.attrs.length === 0) data.attrs = null;
  // 循环结束 触发事件
  emit('change-filter', data)
}
</script>

<template>
  <Transition>
    <div v-if="props.filter == null" style="margin: 30px 0px;">
      <n-skeleton text :repeat="2" height="35px" />
      <n-skeleton text :repeat="2" height="35px" style="width: 90%;" />
      <n-skeleton text height="35px" style="width: 80%;" />
    </div>
    <div v-else>
      <div class="sub-filter">
        <div class="item">
          <div class="head">品牌：</div>
          <div class="body">
            <a
              @click="changeBrand(item.id)"
              :class="{ 'list-active': item.id === props.filter.brands.selected }"
              href="javascript:;"
              v-for="item in props.filter.brands"
              :key="item.id"
            >{{ item.name }}</a>
          </div>
        </div>

        <div class="item" v-for="item in props.filter.saleProperties" :key="item.id">
          <div class="head">{{ item.name }}：</div>
          <div class="body">
            <a
              @click="changeProps(item, desc.id, desc.name)"
              :class="{ 'list-active': desc.id === item.properties.selected }"
              href="javascript:;"
              v-for="desc in item.properties"
              :key="desc.id"
            >{{ desc.name }}</a>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style lang='less' scoped>
// 筛选区
.list-active {
  color: @xtxColor !important;
}
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>